<template>
  <div :style="{ width: '100%', height: '100%' }">
    <div v-if="isError !== true" class="echart" :id="controlid" :style="{
    float: 'left',
    width: '100%',
    height: '100%',
  }"></div>
    <div v-else class="logmsg">{{ logmsg }}</div>
  </div>
</template>
<script>
import 'echarts-wordcloud';
import * as echarts from "echarts";
import tdTheme from "./theme.json"; // 引入默认主题
import "echarts-gl";
import "echarts-liquidfill/src/liquidFill.js"; //在这里引入
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  props: ["options", "isDrillingIn", "mapcity", "mapcode"],
  data() {
    return {
      mychart: undefined,
      controlid: "",
      optionconfig: {},
      isError: false,
      logmsg: "",
      ajaxget: null,
      ajaxpost: null,
    };
  },
  methods: {
    initChart() {
      this.mychart = echarts.init(
        document.getElementById(this.controlid),
        tdTheme
      );
      this.loadOption(this.options);
      const _this = this;
      const erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementById(this.controlid), () => {
        _this.$nextTick(() => {
          this.resize();
        });
      });
      this.mychart.off("click"); //图表渲染前销毁点击事件

      this.mychart.on("click", function (event) {
        _this.$emit("clickEchart", event);
      });
      this.$emit("initChartAfter");
    },
    resize() {
      this.mychart.resize();
    },
    loadOption(options) {
      let app = {};
      if (typeof options === "function") {
        try {
          options(this.mychart, echarts, app, this);
          this.isError = false;
        } catch (ex) {
          this.isError = true;
          this.logmsg = "option函数方法语法错误，具体错误：" + ex;
        }
      } else if (
        typeof options === "string" &&
        options.indexOf("function") >= 0
      ) {
        let fun = undefined;
        try {
          eval("fun=" + options);
          fun(this.mychart, echarts, app, this);
          this.isError = false;
        } catch (ex) {
          this.isError = true;
          this.logmsg = "option函数方法语法错误，具体错误：" + ex;
        }
      } else if (
        typeof options === "string" &&
        options.indexOf("function") < 0
      ) {
        this.isError = false;
        this.optionconfig = eval("(" + options + ")");

        if (this.optionconfig.series.length > 0 && this.optionconfig.series[0].maskImage != null) {
          var maskResource = new Image();
          maskResource.src = this.optionconfig.series[0].maskImage;
          this.optionconfig.series[0].maskImage = maskResource
        }
        if (options !== null && options !== undefined) {
          this.mychart.clear(); // 每次重绘之前，先清除一下
          this.mychart.setOption(this.optionconfig);
        }
      } else if (options !== null && options !== undefined) {
        this.isError = false;
        this.optionconfig = options;
        if (options !== null && options !== undefined) {
          this.mychart.clear(); // 每次重绘之前，先清除一下
          this.mychart.setOption(options);
        }
      } else {
        this.isError = false;
        this.optionconfig = {};
        if (options !== null && options !== undefined) {
          this.mychart.clear(); // 每次重绘之前，先清除一下
          this.mychart.setOption(options);
        }
      }
    },
    getMychart() {
      return this.mychart;
    },

  },
  created() {
    this.$event.registerMapJson = this.registerMapJson;
    this.controlid =
      "div" + Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  watch: {
    options(val) {
      if (this.mychart != null) {
        this.loadOption(val);
      }
    },
  },
  beforeDestroy() {
    if (this.mychart) {
      this.mychart.dispose();
    }
  },
};
</script>
<style scoped>
.logmsg {
  color: red;
  font-size: 25px;
}
</style>
